<template>
	<view class="bg-white">
		<view class="wid100 p-3 box-b" >
			<u-input placeholder="输入城市名检索" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"
				border="surround" shape="circle"
				:customStyle="{backgroundColor:'#F5F5F5',boxShadow:'0px 0px 20px 2px rgba(0,0,0,0.03)'}"
				@input="input" v-model="keyword"></u-input>
		</view>
		<view class="flex flex-wrap pl-3 pt-3">
			<view @tap="toSearch(item)"  v-for="(item,index) in list" :key="index" class="flex justify-center align-center mr-3 mb-2" :style="{
				width: '204rpx',
				height: '76rpx',
				background: '#FFFFFF',
				borderRadius: '8rpx 8rpx 8rpx 8rpx',
				border: '2rpx solid #D8D8D8'
			}">
				<text class="font-28 fw4 cl-44">{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time:null,
				list:[
					{name:'伯明翰'},{name:'伯明翰'},{name:'伯明翰'},{name:'伯明翰'},{name:'伯明翰'},{name:'伯明翰'},{name:'伯明翰'}
				],
				keyword:'',
			}
		},
		onLoad() {
			this.getMoreCity()
		},
		methods: {
			//热门城市
			toSearch(item) {
				
				uni.navigateTo({
					url:`/pages/search/searchDetail?cityData=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			input(){
				if(this.time) clearTimeout(this.time)
				
				this.time = setTimeout(()=>{
					this.list = []
					this.getMoreCity()
				},500)
			},
			getMoreCity(){
				this.$H.post(this.$api.get_city_list, {
					keyword: this.keyword
				}, {token: false}).then(res => {
					if(res.code == 1){
						this.list = res.data
					}
				})
			},
		}
	}
</script>

<style>

</style>
